<template>
  <view class="product-box-car" @tap="handleClick">
    <view class="product-view">
      <view class="product-fl">
        <image
          v-if="car.car_brand_logo"
          :src="car.car_brand_logo"
          mode="aspectFill"
        />
        <image v-else src="/images/biao.png" mode="aspectFill" />
      </view>
      <view class="product-fr">
        <view class="product-title">
          {{ car.car_brand_name + car.car_series_name + car.car_model_name }}
        </view>
        <view class="product-color">
          系统指导价：{{ Number(car.car_guide_price).toFixed(2) }} 万元
        </view>
        <view class="product-deploy">
          卖{{ car.province_name + car.city_name }}
        </view>
        <view class="product-time">
          {{ formatTimeOnlyWeek(car.created_at) }}
        </view>
        <view class="pro-img" v-show="isDock"></view>
      </view>
    </view>
    <view class="find-a">
      紧急寻车中，点击了解详情
      <text class="product-title">></text>
    </view>
  </view>
</template>

<script>
import { formatTimeOnlyWeek, navigateTo, toLogin } from '@utils/'
export default {
  name: 'Item',
  props: {
    car: {
      type: Object,
      default: () => ({})
    }
  },
  data() {
    return {}
  },
  methods: {
    formatTimeOnlyWeek,
    handleClick() {
      if (!this.$store.state.user.token) {
        toLogin()
        return
      }
      navigateTo('business/find/detail', {
        id: this.car.id
      })
    }
  },
  computed: {
    isDock() {
      return this.car.docking_status == 1 ? true : false
    }
  }
}
</script>

<style>
.product-box-car {
  padding: 24rpx 24rpx 0;
  background: #fff;
  margin-bottom: 24rpx;
}
.product-box-car .product-view {
  padding-bottom: 24rpx;
  border-bottom: 2rpx solid rgba(238, 238, 238, 0.5);
  overflow: hidden;
}
.product-box-car .find-a {
  padding: 24rpx 0;
  font-size: 28rpx;
}
.product-box-car .find-a text {
  float: right;
  font-size: 28rpx;
}
.product-box-car .product-view .product-fl {
  float: left;
  width: 96rpx;
  height: 96rpx;
  border: 2rpx solid #ccc;
  border-radius: 50%;
}
.product-box-car .product-view .product-fl image {
  width: 100%;
  height: 100%;
  border-radius: 50%;
}
.product-box-car .product-view .product-fr {
  margin-left: 126rpx;
  position: relative;
}
.product-box-car .product-view .product-title {
  font-size: 32rpx;
}
.product-box-car .product-view .product-deploy {
  display: block;
  font-size: 28rpx;
  color: #333;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
  margin: 0 0 10rpx;
}
.product-box-car .product-view .product-color {
  display: block;
  font-size: 28rpx;
  color: #999;
  margin: 10rpx 0;
}
.product-box-car .product-view .product-time {
  font-size: 24rpx;
  color: #333;
}
.product-box-car .pro-img {
  display: block;
  width: 100rpx;
  height: 100rpx;
  position: absolute;
  top: 0;
  right: 0;
  background: url('./images/success.png') no-repeat center center;
  background-size: cover;
}
</style>
